<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/2.css"/>
	</head>
	<body>
		<div class="container">
			<div class="cube noting">
				<img src="img/2/1.jpg" alt="" class="cube-images img1" />
				<img src="img/2/2.jpg" alt="" class="cube-images img2" />
				<img src="img/2/3.jpg" alt="" class="cube-images img3" />
				<img src="img/2/4.jpg" alt="" class="cube-images img4" />
				<img src="img/2/5.jpg" alt="" class="cube-images img5" />
				<img src="img/2/6.jpg" alt="" class="cube-images img6" />
			</div>
		</div>
		<h2>。。。</h2>
		<div class="image-buttons">
			<input type="image" class="show-image-1" src="img/2/1.jpg" alt=""/>
			<input type="image" class="show-image-2" src="img/2/2.jpg" alt=""/>
			<input type="image" class="show-image-3" src="img/2/3.jpg" alt=""/>
			<input type="image" class="show-image-4" src="img/2/4.jpg" alt=""/>
			<input type="image" class="show-image-5" src="img/2/5.jpg" alt=""/>
			<input type="image" class="show-image-6" src="img/2/6.jpg" alt=""/>
		</div>
		
		<script type="text/javascript">
			(function(){
				var imgbtns = document.getElementsByClassName('image-buttons')[0];
				var currentCubeList = document.getElementsByClassName('cube')[0];
				var currentClass = currentCubeList.classList[1];
				imgbtns.addEventListener('click',function(e){
					e = e || window.event;
					var targetClass = e.target.className;
					var targetNode = e.target.nodeName;
					
					if(targetClass !== currentClass && targetNode == "INPUT"){
						currentCubeList.classList.replace(currentClass,targetClass);
						currentClass = targetClass;
					}
				},false);
			})();
		</script>
	</body>
</html>
